<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车-案例</title>
    <style>
      [v-cloak] {
        display: none;
      }
      table {
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
      }
      th,
      td {
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
      }
      th {
        background: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div>
        <template v-if="list.length">
          <table>
            <thead>
              <tr>
                <th></th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in list">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td>
                  <button
                    @click="handleReduce(index)"
                    :disabled="item.count===1"
                  >
                    -
                  </button>
                  {{item.count}}
                  <button @click="handleAdd(index)">+</button>
                </td>
                <td>
                  <button @click="handleRemove(index)">移除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <div>总价：￥{{ totalPrice}}</div>
        </template>
        <div v-else>购物车为空</div>
      </div>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        list: [
          {
            id: 1,
            name: "iphone 7",
            price: 6188,
            count: 1
          },
          {
            id: 2,
            name: "iPad Pro",
            price: 5888,
            count: 1
          },
          {
            id: 3,
            name: "MacBook Pro",
            price: 21488,
            count: 1
          }
        ]
      },
      methods: {
        handleReduce: function (index) {
          if (this.list[index].count === 1) return
          this.list[index].count--
        },
        handleAdd: function () {
          this.list[index].count++
        },
        handleRemove: function () {
          this.list.splice(index, 1)
        }
      },
      computed: {
        totalPrice: function () {
          var total = 0
          for (var i = 0; i < this.list.length; i++) {
            var item = this.list[i]
            total += item.price * item.count
          }
          return total.toString().replace(/\B(?=(\d{3})+$)/g, ",")
        }
      }
    })
  </script>
</html>
